<template>
    <div class="container-full">
        <div v-if="$store.state.shop.carts.length == 0">
            <van-nav-bar @click-left="eventClickGoBack" left-arrow class="page-head">
                <van-icon @click="clickAddButton = 'all'" name="add-o" slot="right" class="button-icon"/>
                <span @click="clickAddButton = 'all'" slot="right" class="button-text">添加</span>
            </van-nav-bar>
            <img class="page-tip-plus" src="../../../static/images/tip-plus.png"/>
            <div class="page-center-tip">
                <img src="../../../static/images/no-data.png"/>
                <p>还没有添加任何数据哦</p>
                <van-button @click="clickAddButton = 'all'" icon="plus" type="primary" text="添加报价"
                            class="add-quoted-price"/>
            </div>
        </div>
        <div v-else class="add-item-list">
            <van-nav-bar v-if="$store.state.shop.selectMode == 'scan'" :left-text="'订单号：' + $store.state.shop.order"
                         class="page-head">
                <van-icon @click="eventClickResetScan" name="qr" slot="right" class="button-icon"/>
                <span @click="eventClickResetScan" slot="right" class="button-text">重新刷码</span>
            </van-nav-bar>

            <van-nav-bar v-else @click-left="eventClickGoBack" left-arrow class="page-head">
                <van-icon @click="eventClickGoBack" name="add-o" slot="right" class="button-icon"/>
                <span @click="clickAddButton = 'all'" slot="right" class="button-text">添加</span>
            </van-nav-bar>

            <template v-if="$store.state.shop.selectMode == 'scan'">
                <van-notice-bar :scrollable="false" background="#F4F4F4" color="#999999">从我的库存中选择添加</van-notice-bar>

                <van-list v-model="stock.loading" :finished="stock.finished" finished-text="没有更多了"
                          @load="controllerRequestStockData">

                    <order-list-by-delete v-for="(item, index) in $store.state.shop.carts"
                                          :index="index" :title="item.title" :unit="item.unit" :number="item.number"
                                          :key="index" class="list-item bottom-ash-line"
                    />
                </van-list>

                <van-button @click="clickAddButton = 'stock'" icon="plus" type="primary" text="添加库存"
                            class="add-quoted-price full-width"/>

            </template>
            <template v-else>

                <order-list-by-delete v-for="(item, index) in $store.state.shop.carts"
                                      :index="index" :title="item.title" :unit="item.unit" :number="item.number"
                                      :key="index" class="list-item"
                />
                <van-button @click="clickAddButton = 'all'" icon="plus" type="primary" text="添加报价"
                            class="add-quoted-price full-width"/>
            </template>
        </div>
        <bottom-submit-bar/>
        <van-overlay :show="$store.state.shop.show.menu">
            <div class="add-operate-layer">
                <van-icon name="close" class="close-button" @click="clickAddButton = 'close'"/>
                <ul>
                    <li>选择添加方式</li>
                    <li @click="clickAddButton = 'scan'" v-if="showScan===1">扫描二维码</li>
                    <li @click="clickAddButton = 'normal'">直接添加</li>
                </ul>
            </div>
        </van-overlay>
    </div>
</template>

<script>
    import {NavBar, Icon, Button, Overlay, List, NoticeBar} from 'vant';
    import BottomSubmitBar from '../../components/currency/order-item/bottom-submit-bar.vue';
    import OrderListByDelete from '../../components/currency/order-list/order-delete.vue';

    export default {
        name: 'ShopOrderAdds',
        components: {
            [NavBar.name]: NavBar, [Icon.name]: Icon, [Button.name]: Button, [Overlay.name]: Overlay,
            [List.name]: List, [NoticeBar.name]: NoticeBar,
            BottomSubmitBar, OrderListByDelete
        },
        data() {
            return {
                clickAddButton: '',
                stock: {
                    loading: false, finished: false,
                    page: 0, limit: 30
                },
                showScan: 1
            }
        },
        mounted() {
            /*$store.state.shop.carts*/
            var options = [];
            if (this.$route.params.reset && this.$store.state.shop.selectMode == 'scan') {
                options = [
                    {key: 'operateMode', value: 'will'},
                    {key: 'carts', value: []},
                    {key: 'selectItems', value: []},
                    {key: 'order', value: ''},
                    {key: 'orderPrice', value: 0},
                    {key: 'status.predictPrice', value: false},
                    {key: 'status.allSelect', value: false}
                ];
            } else {
                options = [
                    {key: 'operateMode', value: 'will'}
                ];
            }
            this.$store.commit('shop/setElementValue', options);

            // console.log(this.$store.state.shop.carts);
        },
        methods: {
            eventClickGoBack() {
                this.$router.go(-1);
            },
            controllerRequestStockData() {
                var url = '/api/home/user/StockList',
                    params = {
                        // u_id: '',
                        page: this.stock.page,
                        list_rows: this.stock.limit,
                        token: this.$store.state.options.user.token
                    };

                this.$util.postRequestInterface(url, params, (res) => {
                    if (res.data.count == 0) {
                        this.$router.push('/shop/stock-manage');
                        return;
                    } else {
                        if (this.stock.page == 0) this.$store.commit('shop/resetShopCartsDataset', []);

                        this.stock.page++;

                        let items = [];
                        for (let x of res.data.data) {
                            items.push({
                                stockItemId: x.id,
                                id: x.garbageid,
                                idList: x.garbagepgalist,
                                title: x.garbagename,
                                pga: x.garbagepga,
                                oda: x,
                                // weight: (x.weighting_method == 0) ? x.weighting_num : '',
                                // number: (x.weighting_method == 1) ? x.weighting_num : ''
                            });
                        }

                        let total = this.$store.state.shop.carts.length + items.length;
                        if (total >= res.data.count) this.stock.finished = true;
                        this.stock.loading = false;
                        this.$store.commit('shop/resetShopCartsDataset', this.$store.state.shop.carts.concat(items));
                    }
                });
            },
            eventClickAddStockItem() {
                this.$store.commit('shop/setElementValue', [
                    {key: 'operateMode', value: 'stock'}
                ]);

                this.$router.push('/shop/order-item-add-normal');
            },
            eventClickResetScan() {
                this.stock.page = 0;
                this.finished = false;
                this.loading = false;
                this.repeatOperate('scan');
            },
            repeatOperate(key) {
                let _this = this;
                if (key == 'scan') {
                    this.$util.requestLoadWeChatSDKOperate(['scanQRCode']).then(
                        this.$util.requestWeChatAuthorizeDataset
                    ).then(
                        this.$util.initializationWXScanQRCode
                    ).then(
                        (res) => {
                            if (res.resultStr.indexOf("api/home/order/TracingSource") != -1) {
                                _this.$router.push({
                                    path: `/shop/orderSource?order=${res.resultStr.split("?order=")[1]}`
                                })
                                return
                            }
                            this.$store.commit('shop/setElementValue', [
                                {
                                    key: 'selectMode', value: 'scan'
                                }, {
                                    key: 'order', value: res.resultStr
                                }, {
                                    key: 'show.menu', value: false
                                },
                                {key: 'carts', value: []},
                                {key: 'selectItems', value: []},
                                {key: 'orderPrice', value: 0},
                                {key: 'status.allSelect', value: false}
                            ]);
                            this.controllerRequestStockData();
                        }
                    ).catch(
                        (frs) => {
                            this.$store.commit('shop/setElementValue', [
                                {
                                    key: 'show.menu', value: false
                                }
                            ]);
                            console.log('wx', frs);
                        }
                    );
                } else {
                    let options = [];
                    options.push({key: 'show.menu', value: false});
                    options.push({key: 'selectMode', value: key});

                    this.$store.commit('shop/setElementValue', options);
                    this.$router.push({
                        path: `/shop/order-item-add-${key}`
                    });
                }
            }
        },
        watch: {
            async clickAddButton(nVal, oVal) {
                let _this = this;
                var mode = this.$store.state.shop.mode;
                console.log(nVal, oVal);

                let res = await this.$util.postSystemGetlist("/api/home/System/getlist", {}, (res) => {
                    // console.log('logs ',res)
                    _this.showScan = res.data.value
                });
                // let res= await axios.post("/api/home/System/getlist");
                // console.log('logs ',res)

                // console.log(mode);
                if (nVal == 'stock') this.eventClickAddStockItem();
                else if (mode != 'all' && nVal == 'all') this.repeatOperate(mode);
                else if (mode == 'all' && nVal == 'normal') this.repeatOperate('normal');
                else if (mode == 'all' && nVal == 'scan') this.repeatOperate('scan');
                else if (mode == 'all' && nVal == 'all') {
                    this.$store.commit('shop/setElementValue', [{key: 'show.menu', value: true}]);
                } else if (nVal == 'close') {
                    this.$store.commit('shop/setElementValue', [{key: 'show.menu', value: false}]);
                }
                this.clickAddButton = '';
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container-full {
        position: relative;
        padding-bottom: 7rem;
    }

    .page-head {
        background-color: #00CC00;

        .van-icon-arrow-left, .van-nav-bar__text,
        .button-icon, .button-text {
            color: #ffffff !important;
        }

        .button-icon {
            font-size: 1.6rem;
        }

        .button-text {
            padding-left: 0.8rem;
            position: relative;
            top: 1px;
        }
    }

    .page-tip-plus {
        width: 70%;
        position: absolute;
        top: 5rem;
        right: 1rem;
    }

    .page-center-tip {
        position: absolute;
        width: 54%;
        top: 36vh;
        left: 50%;
        margin-left: -27%;

        text-align: center;

        &:after {
            content: "";
            display: block;
            // padding-top: 100%;
        }

        img {
            width: 80%;
        }

        p {
            font-size: 1.3rem;
            color: #999999;
            padding: 1rem 0rem;
        }
    }

    .add-quoted-price {
        margin-top: 0.5rem;
        border-radius: 0.3rem;
        background-color: #00CC00;
    }

    .add-operate-layer {
        position: absolute;
        left: 0rem;
        right: 0rem;
        top: 30%;
        margin: 0rem auto;

        width: 70%;
        border-radius: 0.8rem;

        background-color: #ffffff;
        font-size: 1.4rem;
        color: #333333;

        li {
            padding: 1.6rem;
            text-align: center;
            border-bottom: 0.1rem solid #DDDDDD;

            &:first-child {
                font-size: 1.3rem;
                color: #666666;
            }

            &:last-child {
                border: none;
            }
        }

        .close-button {
            width: 1.2rem;
            height: 1rem;
            font-size: 1.4rem;
            position: absolute;
            top: 1rem;
            right: 1rem;
            color: #BFBFBF;
        }

        // &:after {
        //     content: "X";
        //     width: 1.2rem;
        //     height: 1rem;
        //     font-size: 1.4rem;
        //     position: absolute;
        //     top: 1rem;
        //     right: 1rem;
        //     color: #BFBFBF;
        // }
    }

    .add-item-list {
        .list-item {
            padding: 0.8rem 1rem;
            padding-right: 0rem;
            border-bottom: 0.5rem solid #EEEEEE;

            &:last-child {
                border-bottom: none;
            }
        }

        .add-quoted-price {
            margin-top: 2rem;
        }
    }
</style>
